<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mobila banken</title>

        <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
        <link rel="stylesheet" href="styles/my.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/ember-0.9.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
    
    </head>
<body>

    <div id="container"></div>
    <script type="text/x-handlebars" data-template-name="overview">
	    <div data-role="page" id="overview">
            <div data-theme="" data-role="header" data-position="fixed">
                <h3>
                    Mobila Banken
                </h3>
                <a data-role="button" data-rel="back" data-transition="slide" href="#overview" data-icon="back" data-iconpos="bottom">
                </a>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Konton
                    </li>
					
					{{#each AccountOverview.searchResults}}
					<li data-theme="c">
						<a href="accountDetails.html" data-transition="slide">{{arrangementId}} - {{customerArrangementName}}</a>
					</li>
					{{/each}}
                </ul>
                <div>
                    <a href="#" data-transition="fade">
                        Visa fler konton
                    </a>
                </div>
            </div>
        </div>
    </script>

    
  
  
  <script>
    // Namespace
    AccountOverview = Em.Application.create({
      ready: function() {
	  AccountOverview.searchResults.refresh();
	  }
    });

    // Model
    AccountOverview.Account = Em.Object.extend();

    // Collection
    AccountOverview.searchResults = Em.ArrayController.create({
      content: [],

	  addAccount: function(account) {
		this.pushObject(account);
        },
      
	  
      refresh: function() {
		var self = this;
        $.getJSON(
		"http://localhost:9998/accounts?callback=?", 
			//"http://mobile-app-demo.herokuapp.com/accounts?callback=jsonCallback", 
			function(data) {
			    console.debug(data.accounts);
				//console.debug(data[1]);
				for (var i = 0; i < data.accounts.length; i++) {
				//console.debug(data[i]);
					self.addAccount(AccountOverview.Account.create(data.accounts[i]));
				}
			}
		);
      }
    });

    var view = Em.View.create({
        templateName: 'overview',
    });
    view.appendTo('#container');
  </script>
</body>
</html>
